home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Toolkit / Songbird 0.1 / Songbird_0_1_0.exe / chrome / content / svg_events2.xml < prev    next >
Extensible Markup Language  |  2005-11-26  |  11KB  |  220 lines
  1. <?xml version="1.0"?>
  2. <?xml-stylesheet href="chrome://rmp_demo/skin/rmp_demo.css" type="text/css"?>
  3. <?xml-stylesheet href="chrome://rmp_demo/content/bindings/bindings.css" type="text/css"?>
  4.  
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml"
  7.   xmlns:svg="http://www.w3.org/2000/svg" 
  8.   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  9.   >
  10.  
  11.   <head>
  12.     <script type="application/x-javascript" src="chrome://rmp_demo/content/smilScript.js" />
  13.   </head>
  14.  
  15.   <body onload="InitSMIL(evt);">
  16.  
  17.     <svg:svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
  18.       width='100%' height='100%' viewBox='0 0 480 440'
  19.       onload='InitSMIL(evt)'>
  20.  
  21.       <g transform='translate(15, 10)'>
  22.           <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
  23.           <text x='70' y='20' font-size='16' text-anchor='middle'>set</text>
  24.  
  25.  
  26.           <circle id='circle_1' cx='35' cy='50' r='15' fill='orange' stroke-width='2'>
  27.             <set attributeName='fill' attributeType='XML' from='orange' to='red' begin='mouseover' end='mouseout' fill='freeze'/>
  28.             <set attributeName='stroke' attributeType='CSS' from='orange' to='black' begin='mouseover' end='mouseout' fill='freeze'/>
  29.             <set attributeName='stroke-width' attributeType='XML' to='5' begin='mouseover' end='mouseout'/>
  30.           </circle>
  31.  
  32.           <rect id='rect_2' x='20' y='75' width='30' height='30' rx='5' ry='5' fill='crimson'>
  33.             <set attributeName='rx' attributeType='XML' from='5' to='15' begin='mouseover' fill='freeze'/>
  34.             <set attributeName='ry' attributeType='XML' to='0' begin='mouseout'/>
  35.           </rect>
  36.  
  37.           <ellipse id='ellipse_1' cx='35' cy='130' rx='20' ry='15' fill='indigo'>
  38.             <set attributeName='fill' to='pink' begin='click+0.5s'/>
  39.           </ellipse>
  40.  
  41.           <rect id='rect_timed' x='20' y='155' width='30' height='30' rx='5' ry='5' fill='red'>
  42.             <set id='timed1' attributeName='fill' to='orange' begin='1.5s'/>
  43.             <set attributeName='fill' to='lime' begin='3s'/>
  44.           </rect>
  45.  
  46.           <g>
  47.             <circle id='target_1' cx='95' cy='50' r='15' style='fill:gold; stroke:gold;'/>
  48.  
  49.             <polygon id='source_1' points='70,40 90,50 70,60' fill='lime'>
  50.                 <set xlink:href='#target_1' attributeName='fill' attributeType='XML' to='green' begin='click' fill='freeze'/>
  51.                 <set xlink:href='#target_1' attributeName='stroke' attributeType='CSS' to='green' begin='click' fill='freeze'/>
  52.             </polygon>
  53.           </g>
  54.  
  55.           <g>
  56.             <circle id='target_2' cx='95' cy='90' r='15' fill='gold'>
  57.                 <set attributeName='fill' attributeType='XML' to='green' begin='source_2.click' fill='freeze'/>
  58.             </circle>
  59.  
  60.             <polygon id='source_2' points='70,80 90,90 70,100' fill='lime' />
  61.           </g>
  62.  
  63.           <g>
  64.             <circle id='target_2' cx='95' cy='130' r='15' fill='gold'>
  65.                 <set attributeName='fill' attributeType='XML' to='green' begin='source_3a.click; source_3b.click' fill='freeze'/>
  66.                 <set attributeName='stroke' attributeType='XML' to='red' begin='source_3a.mouseover; source_3b.mouseover' fill='freeze'/>
  67.             </circle>
  68.  
  69.             <polygon id='source_3a' points='70,120 90,130 70,140' fill='lime' />
  70.             <polygon id='source_3b' points='120,120 100,130 120,140' fill='lime' />
  71.           </g>
  72.  
  73.           <circle id='circle_inout' cx='95' cy='170' r='15' fill='orange'>
  74.             <set attributeName='fill' attributeType='XML' from='orange' to='red' begin='mouseover' fill='freeze'/>
  75.             <set attributeName='fill' attributeType='XML' from='red' to='orange' begin='mouseout' fill='freeze'/>
  76.           </circle>
  77.       </g>
  78.  
  79.       <g transform='translate(170, 10)'>
  80.           <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
  81.           <text x='70' y='20' font-size='16' text-anchor='middle'>animate</text>
  82.  
  83.  
  84.           <circle id='circle_animate_1' cx='45' cy='55' r='10' fill='blue'>
  85.             <animate attributeName='r' begin='0s' dur='1s' from='10' to='0' repeatCount='indefinite'/>
  86.           </circle>
  87.  
  88.           <circle id='circle_animate_2' cx='45' cy='80' r='10' fill='blue'>
  89.             <animate attributeName='r' begin='0s' dur='1s' from='10' to='0' repeatCount='3'/>
  90.           </circle>
  91.  
  92.           <circle id='circle_animate_3' cx='45' cy='105' r='10' fill='blue'>
  93.             <animate attributeName='r' begin='0s' dur='1s' from='0' to='10' repeatCount='indefinite'/>
  94.           </circle>
  95.  
  96.           <circle id='circle_animate_4' cx='45' cy='140' r='20' fill='blue'>
  97.             <animate attributeName='r' begin='0s' dur='4s' from='20' to='5' repeatCount='1' fill='freeze'/>
  98.           </circle>
  99.  
  100.  
  101.           <rect id='rect_animate_opacity_1' x='90' y='45' width='20' height='20' rx='5' ry='5' fill='crimson'>
  102.             <animate attributeName='opacity' begin='0.5s' dur='4s' from='1' to='0' repeatCount='indefinite'/>
  103.           </rect>
  104.  
  105.           <rect id='rect_animate_opacity_2' x='90' y='70' width='20' height='20' rx='5' ry='5' fill='crimson'>
  106.             <animate attributeName='opacity' begin='0.5s' dur='4s' to='0' repeatCount='indefinite'/>
  107.           </rect>
  108.  
  109.       </g>
  110.  
  111.       <g transform='translate(325, 10)'>
  112.           <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
  113.           <text x='70' y='20' font-size='16' text-anchor='middle'>animateColor</text>
  114.  
  115.  
  116.           <circle id='circle_animateColor_1' cx='70' cy='50' r='15' fill='yellow' stroke-width='2'>
  117.             <animateColor attributeName='fill' begin='2s' dur='4s' from='yellow' to='red' fill='freeze' repeatCount='1'/>
  118.           </circle>
  119.  
  120.           <circle id='circle_animateColor_2' cx='70' cy='90' r='15' fill='yellow' stroke-width='2'>
  121.             <animateColor attributeName='fill' begin='2s' dur='4s' from='rgb(0,0,0)' to='red' fill='freeze' repeatCount='1'/>
  122.           </circle>
  123.  
  124.           <circle id='circle_animateColor_3' cx='70' cy='130' r='15' fill='yellow' stroke-width='2'>
  125.             <animateColor attributeName='fill' begin='2s' dur='4s' from='#fff' to='red' fill='freeze' repeatCount='1'/>
  126.           </circle>
  127.  
  128.       </g>
  129.  
  130.  
  131.       <g transform='translate(15, 230)'>
  132.           <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
  133.           <text x='70' y='20' font-size='16' text-anchor='middle'>animateMotion</text>
  134.  
  135.  
  136.           <path id='motionpath_1' stroke-width='1' stroke='blue' fill='none' d='M20,30 C100,90 -40,120 40,190'/>
  137.           <circle id='circle_animateMotion_1' cx='0' cy='0' r='5' fill='blue'>
  138.             <animateMotion dur='5s' fill='freeze' repeatCount='indefinite'>
  139.                 <mpath xlink:href='#motionpath_1'/>
  140.             </animateMotion>
  141.           </circle>
  142.  
  143.           <circle id='circle_animateMotion_2' cx='0' cy='0' r='5' fill='red'>
  144.             <animateMotion path='M40,30 C-40,90 100,120 20,190' dur='5s' fill='freeze' repeatCount='indefinite' />
  145.           </circle>
  146.  
  147.           <path id='motionpath_3' stroke-width='1' stroke='blue' fill='none' d='M60,30 L60,190'/>
  148.           <circle id='circle_animateMotion_3' cx='0' cy='0' r='5' fill='blue'>
  149.             <animateMotion begin='0s' dur='5s' fill='freeze' repeatCount='1'>
  150.                 <mpath xlink:href='#motionpath_3'/>
  151.             </animateMotion>
  152.           </circle>
  153.  
  154.           <rect id='rect_animateMotion_1' x='80' y='25' width='10' height='10' fill='crimson'>
  155.             <animateMotion begin='0s' dur='5s' to='0, 160' repeatCount='1' fill='freeze'/>
  156.           </rect>
  157.  
  158.           <rect id='rect_animateMotion_2' x='80' y='25' width='10' height='10' fill='crimson'>
  159.             <animateMotion begin='0s' dur='5s' to='160' repeatCount='1' fill='freeze'/>
  160.           </rect>
  161.  
  162.           <rect id='rect_animateMotion_3' x='80' y='25' width='10' height='10' fill='crimson'>
  163.             <animateMotion begin='0s' dur='5s' to='160, 160' repeatCount='1' fill='freeze'/>
  164.           </rect>
  165.       </g>
  166.  
  167.       <g transform='translate(170, 230)'>
  168.           <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
  169.           <text x='70' y='20' font-size='16' text-anchor='middle'>animateTransform</text>
  170.  
  171.           <rect id='rect_animateTransform_rotate_1' x='25' y='40' width='30' height='30' fill='cornflowerblue' stroke='blue'>
  172.             <animateTransform attributeName='transform' type='rotate' from='0' to='360' begin='click' dur='5s' repeatCount='2'/>
  173.           </rect>
  174.  
  175.           <rect id='rect_animateTransform_rotate_2' x='75' y='40' width='30' height='30' fill='cornflowerblue' stroke='blue'>
  176.             <animateTransform attributeType='XML' attributeName='transform' type='rotate' from='0,90,55' to='-360,90,55' begin='click' dur='5s' repeatCount='2'/>
  177.           </rect>
  178.  
  179.           <rect id='rect_animateTransform_translate' x='25' y='90' width='30' height='30' fill='cornflowerblue' stroke='blue'>
  180.             <animateTransform attributeName='transform' type='translate' from='0' to='50' begin='click' dur='5s' repeatCount='2'/>
  181.           </rect>
  182.  
  183.           <rect id='rect_animateTransform_scale_1' x='25' y='140' width='30' height='30' fill='cornflowerblue' stroke='blue'>
  184.             <animateTransform attributeName='transform' type='scale' from='1' to='2' begin='click' dur='5s' repeatCount='2'/>
  185.           </rect>
  186.  
  187.           <rect id='rect_animateTransform_scale_2' x='75' y='140' width='30' height='30' fill='cornflowerblue' stroke='blue'>
  188.             <animateTransform attributeName='transform' type='scale' from='1' to='0.3' begin='click' dur='5s' repeatCount='2'/>
  189.           </rect>
  190.  
  191.       </g>
  192.  
  193.       <g transform='translate(325, 230)'>
  194.           <rect id='rect_1' x='0' y='0' width='140' height='200' fill='none' stroke='black' stroke-width='2'/>
  195.           <text x='70' y='20' font-size='16' text-anchor='middle'>'prev', '.start', '.end'</text>
  196.  
  197.  
  198.           <circle id='circle_start_end_1' cx='70' cy='70' r='10' fill='red'>
  199.             <animate id='grow_1' attributeName='r' begin='0.5s' dur='3s' from='10' to='30' repeatCount='1' fill='freeze'/>
  200.             <set attributeName='fill' begin='prev.begin' to='gold' repeatCount='1' fill='freeze'/>
  201.             <set attributeName='fill' begin='grow_1.end' to='lime' repeatCount='1' fill='freeze'/>
  202.           </circle>
  203.  
  204.           <circle id='circle_start_end_2' cx='70' cy='70' r='0' fill='green'>
  205.             <animate id='grow_2' attributeName='r' begin='grow_1.end' dur='3s' from='0' to='10' repeatCount='1' fill='freeze'/>
  206.             <set attributeName='fill' begin='grow_1.end+2s' to='gold' repeatCount='1' fill='freeze'/>
  207.           </circle>
  208.  
  209.       </g>
  210.  
  211.       <text id='textOutput' x='100%' y='100%' font-size='18px' fill='crimson' text-anchor='end' baseline-shift='150%'><![CDATA[]]></text>
  212.  
  213.     </svg:svg>
  214.  
  215.     <multistatebutton flex="1" id="songbird_multistatebuttontest"/>
  216.  
  217.   </body>
  218.  
  219. </html>
  220.